{% from "_icones.html" import icone %}
<dialog id="dlg-movimento">
  <form method="post" action="{{ url_for('estoque_movimento') }}">
    <input type="hidden" name="volta" value="{{ request.full_path }}">
    <div class="cab"><h2>Lançar movimento de estoque</h2></div>
    <div class="corpo"><div class="campos">
      <div class="c12" id="mov-busca-caixa"><label>Produto</label><input id="mov-busca" placeholder="Buscar produto pelo nome ou código"></div>
      <div class="c12 peq" id="mov-produto-nome" hidden></div>
      <input type="hidden" name="produto_id" id="mov-produto">
      <div class="c12"><label>Tipo</label>
        <select name="tipo" id="mov-tipo">
          <option value="entrada">Entrada (soma ao saldo)</option>
          <option value="saida">Saída (tira do saldo: perda, consumo, doação...)</option>
          <option value="ajuste">Inventário (informar a quantidade contada)</option>
        </select></div>
      <div class="c6"><label id="mov-rot-qtd">Quantidade</label><input name="quantidade" inputmode="decimal" required></div>
      <div class="c6" id="mov-custo"><label>Custo unitário (R$) <span class="opc">opcional</span></label><input name="custo" inputmode="decimal"></div>
      <div class="c6"><label>Data</label><input name="data" type="date" value="{{ agora.strftime('%Y-%m-%d') }}"></div>
      <div class="c12"><label>Observação <span class="opc">opcional</span></label><input name="observacao" maxlength="200"></div>
    </div></div>
    <div class="rodape-form"><button class="btn" type="button" onclick="this.closest('dialog').close()">Voltar</button><button class="btn prim">Lançar</button></div>
  </form>
</dialog>
<script>
function abrirMovimento(p) {
  const dlg = document.getElementById('dlg-movimento');
  document.getElementById('mov-produto').value = p ? p.id : '';
  const nome = document.getElementById('mov-produto-nome');
  document.getElementById('mov-busca-caixa').hidden = !!p;
  nome.hidden = !p;
  nome.innerHTML = p ? `<b>${escapar(p.descricao)}</b> <span class="suave">(${escapar(p.unidade || '')})</span>` : '';
  dlg.showModal();
}
document.addEventListener('DOMContentLoaded', () => {
  const tipo = document.getElementById('mov-tipo');
  const atual = () => {
    document.getElementById('mov-rot-qtd').textContent = tipo.value === 'ajuste' ? 'Quantidade contada no inventário' : 'Quantidade';
    document.getElementById('mov-custo').hidden = tipo.value === 'saida';
  };
  tipo.addEventListener('change', atual);
  atual();
  autocompletar(document.getElementById('mov-busca'),
    async (q) => (await fetch('/api/produtos?q=' + encodeURIComponent(q))).json(),
    (p) => `<b>${escapar(p.descricao)}</b><small>${escapar(p.codigo)} · saldo ${String(p.saldo).replace('.', ',')} ${escapar(p.unidade || '')}</small>`,
    (p) => {
      document.getElementById('mov-produto').value = p.id;
      document.getElementById('mov-busca').value = p.descricao;
    });
});
</script>